<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" th:href="@{/static/ypb/Y-background/backstage.css}"   type="text/css"/>
    <link rel="stylesheet" th:href="@{/static/ypb/Y-background/Y-user/user.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/static/ypb/Y-background/font_2528121_iz4e8df3nha/iconfont.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/static/ypb/Y-background/font_2528121_66g78zut538/iconfont.css}" type="text/css"/>
    <link rel="shortcut icon"  th:href="@{/static/L-img/L-image/L-logo.png}">
</head>
<body>
          <!-- 侧边栏 -->
<div class="center">
    <div class="sidebar">
        <ul>
            <li class="side side_1"><a class="option option_1" href="#">音乐后台管理系统</a></li>

            <li class="side user" style="background-color: #1c2b3b;"><a class="option option_3" href="/ssmbuild/admin/queryAllUsers">
                <i class="iconfont icon-yonghu2"></i>
                用户管理</a></li>


            <li class="side music" style="background-color: #1c2b3b;"><a class="option option_5" href="../Y-music/music.html">
                <i class="iconfont icon-yinle1" style="margin-right: 4px;"></i>
                音乐管理<i class="iconfont icon-jiantouxiangxia"></i></a></li>
                <div class="musicForm" style="display: block;">
                    <li class="side branch"><a th:href="@{/admin/allMusic}" class="option branch_1">音乐</a></li>
                    <li class="side branch" style="background-color: rgb(85, 76, 216) ;"><a th:href="@{/admin/querySinger}" class="option branch_2">歌手</a></li>
                    <li class="side branch"><a th:href="@{/admin/queryAllAlbum}" class="option branch_3">专辑</a></li>
                    <li class="side branch"><a th:href="@{/admin/queryDis}" class="option branch_4">评论</a></li>

                </div>
        </ul>
    </div>
</div>
<!-- 右边内容区 -->
<div class="rightContent">
    <div class="itemBar">
        <div class="headBar">
            <p class="welcome">欢迎<span class="headPhoto"></span></p>
            <p class="back">退出登录</p>
        </div>
        <div class="headLine">
            <input type="text" class="input" placeholder="请输入歌手名字">
            <button class="ssBtn"><i class="iconfont icon-sousuo1"></i>搜索</button>
            <button class="reset"><i class="iconfont icon-shuaxin2"></i>重置</button>
            <button class="batch" style="margin-left: 40px">批量删除</button>
            <button class="add"><i class="iconfont icon-icon-test"></i>增加</button>
        </div>
        <!-- 音乐 -->
        <div class="form">
            <table cellpadding="10">
                <thead>
                <tr class="formHead"  cellpadding="0" cellspacing="0">
                    <th class="alone">
                        <input type="checkbox"  name="allChecked" style="height: 17px;width: 17px" id="all">全选
                    </th>
                        <th class="alone">序号</th>
                        <th class="alone">歌手名字</th>
                        <th class="alone">歌手账号</th>
                        <th class="alone">歌手性别</th>
                        <th class="alone">歌手邮箱</th>
                        <th class="alone">歌手热度</th>
                        <th class="alone">VIP剩余天数</th>
                        <th class="alone">操作</th>
                       
                    </tr>
                </thead>
                <tbody class="content">
                <tr class='found' th:each="singer,loopStatus:${Users}" th:attr="everId=${singer.userId},userbirth=${singer.userBirth},userImgload=${singer.userImgload},userPwd=${singer.userPwd},userThing=${singer.userThing},
                  userLv=${singer.userLv},VipDay=${singer.userVipBal} ">
                    <td class='Ffind'><input class="choice" type="checkbox" th:value="${singer.userHao}" name="numbers"></td>
                    <td class='Ffind' th:text="${loopStatus.count}">1</td>
                    <td class='Ffind' th:text="${singer.userName}">1445587215</td>
                    <td class='Ffind' th:text="${singer.userHao}">22</td>
                    <td class='Ffind' th:text="${singer.userGen}">22</td>
                    <td class='Ffind' th:text="${singer.userEmail}">22</td>
                    <td class='Ffind' th:text="${singer.userHot}">22</td>
                    <td class='Ffind' th:text="${singer.userVipBal}">22</td>
                    <td class='Ffind'>
                        <button class='del'>删除</button>
                        <button class='amend'>更改</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <span class="changePage">
             <button class="first">首页</button>
                <button class="previous">上一页</button>
            前往第<input type="text" class="toPage" maxlength="2" th:value="${page}" autocomplete="off" >页/共<span class="pageAll" th:text="${sumPage}"></span>页

            <button class="next">下一页</button>
                <button class="end">尾页</button>
        </span>
        </div>
    </div>
</div>
<div class="clear"> </div>
<!-- 添加用户的弹框 -->
<div class="addUser" style="display: none;">
    <table class="uForm">
        <tbody class="initial" >
            <tr class="line">
                <td>歌手生日：
                </td><td class="_name blank"><input class="information email" type="text" placeholder="请输入歌手生日"></td>
            </tr>
            <tr class="line">
                <td>歌手邮箱：</td>
                <td class="tel blank"><input class="information email" type="text" placeholder="请输入歌手邮箱"></td>
            </tr>
            <tr class="line">
                <td>歌手账号：</td>
                <td class="age blank"><input class="information email" type="text" placeholder="请输入歌手账号"></td>
            </tr>
            <tr class="line">
                <td>歌手热度：</td>
                <td class="age blank"><input class="information email" type="text" placeholder="请输入歌手热度"></td>
            </tr>
            <tr class="line">
                <td>歌手头像：</td>
                <td class="age blank"><input class="information email" type="text" placeholder="请输入歌手头像"></td>
            </tr>
            <tr class="line">
                <td>歌手姓名：</td>
                <td class="age blank"><input class="information email" type="text" placeholder="请输入歌手姓名"></td>
            </tr>
            <tr class="line">
                <td>用户密码：</td>
                <td class="age blank"><input class="information email" type="text" placeholder="请输入用户密码"></td>
            </tr>
            <tr class="line">
                <td>歌手详情：</td>
                <td class="age blank"><input class="information email" type="text" placeholder="请输入歌手详情"></td>
            </tr>
            <tr class="line">
                <td>歌手性别：</td>
                <td class="gender blank">
                    <select class="select">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select></td>
            </tr>

        </tbody>
    </table>
    
    <button class="affirm">确认</button>
    <button class="cancel">取消</button>
</div>

          <!--修改歌手信息的框-->
          <div class="amendUser" style="display: none;">
              <table class="uForm">
                  <tbody class="initial">
                  <tr class="line">
                      <td>歌手生日：
                      <td class="_name blank"><input class="information userBirth" type="text" placeholder="请输入歌手生日"></td>
                  </tr>
                  <tr class="line">
                      <td>歌手邮箱：</td>
                      <td class="tel blank"><input class="information userEmail" type="email"></td>
                  </tr>

                  <tr class="line">
                      <td>歌手账号：</td>
                      <td class="tel blank"><input class="information userHao" type="text"></td>
                  </tr>
                  <tr class="line">
                      <td>歌手热度：</td>
                      <td class="tel blank"><input class="information userHot" type="text"></td>
                  </tr>
                  <tr class="line">
                      <td>歌手头像：</td>
                      <td class="tel blank"><input class="information userImgload" type="text"></td>
                  </tr>
                  <tr class="line">
                      <td>用户密码：</td>
                      <td class="tel blank"><input class="information userPwd" type="text"></td>
                  </tr>
                  <tr class="line">
                      <td>歌手姓名：</td>
                      <td class="tel blank"><input class="information userName" type="text" placeholder="请输入歌手姓名"></td>
                  </tr>
                  <tr class="line">
                      <td>歌手详情：</td>
                      <td class="tel blank"><input class="information userThing" type="text"></td>
                  </tr>
                  <tr class="line">
                      <td>Vip剩余天数：</td>
                      <td class="tel blank"><input class="information VipDay" type="text"></td>
                  </tr>
                  <tr class="line">
                      <td>歌手性别：</td>
                      <td class="gender blank">
                          <select class="select selectGen">
                              <option value="男">男</option>
                              <option value="女">女</option>
                          </select></td>
                  </tr>
                  <tr class="line">
                      <td>用户等级：</td>
                      <td class="userLv blank">
                          <select class="select selectLv">
                              <option value="普通用户">普通用户</option>
                              <option value="歌手">歌手</option>
                              <option value="VIP">VIP</option>
                          </select>
                      </td>
                  </tr>

                  </tbody>
              </table>
              </table>
              <button class="affirm_2">确认</button>
              <button class="cancel_2">取消</button>
          </div>

    
</body>
<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js}"></script>
<script th:src="@{/static/ypb/Y-js/Y-item/singer.js}"></script>
</html>